
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日名言</title>
    <style>
        .quote-container {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 25px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .quote-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        
        .quote-text {
            font-size: 1.5rem;
            font-weight: 500;
            color: #333;
            line-height: 1.6;
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .quote-author {
            font-size: 1.1rem;
            color: #666;
            font-weight: 400;
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        button {
            padding: 8px 20px;
            border: none;
            border-radius: 25px;
            background: #4a6fa5;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        button:hover {
            background: #3a5a8c;
            transform: scale(1.05);
        }
        
        .settings-panel {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255,255,255,0.8);
            border-radius: 10px;
            display: none;
        }
        
        .settings-panel.show {
            display: block;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="quote-container">
        <div class="quote-display">
            <p class="quote-text" id="quote-text">点击下方按钮获取名言</p>
            <p class="quote-author" id="quote-author"></p>
        </div>
        
        <div class="controls">
            <button id="new-quote">新名言</button>
            <button id="settings-btn">设置</button>
        </div>
        
        <div class="settings-panel" id="settings-panel">
            <h3>个性化设置</h3>
            <div>
                <label for="quote-type">名言类型:</label>
                <select id="quote-type">
                    <option value="random">随机</option>
                    <option value="inspirational">励志</option>
                    <option value="friendship">友情</option>
                    <option value="love">爱情</option>
                </select>
            </div>
            <div>
                <label for="font-size">字体大小:</label>
                <input type="range" id="font-size" min="14" max="24" value="18">
            </div>
            <button id="save-settings">保存设置</button>
        </div>
    </div>

    <script>
        // 本地名言库
        const localQuotes = [
            {text: "生命不止，奋斗不息", author: "方志敏", type: "inspirational"},
            {text: "知识就是力量", author: "李约瑟", type: "inspirational"},
            {text: "海内存知己，天涯若比邻", author: "王勃", type: "friendship"},
            {text: "两情若是久长时，又岂在朝朝暮暮", author: "秦观", type: "love"},
            {text: "天行健，君子以自强不息", author: "《周易》", type: "inspirational"},
            {text: "己所不欲，勿施于人", author: "孔子", type: "inspirational"}
        ];
        
        // DOM元素
        const quoteText = document.getElementById('quote-text');
        const quoteAuthor = document.getElementById('quote-author');
        const newQuoteBtn = document.getElementById('new-quote');
        const settingsBtn = document.getElementById('settings-btn');
        const settingsPanel = document.getElementById('settings-panel');
        const saveSettingsBtn = document.getElementById('save-settings');
        const quoteTypeSelect = document.getElementById('quote-type');
        const fontSizeSlider = document.getElementById('font-size');
        
        // 从localStorage加载设置
        function loadSettings() {
            const settings = JSON.parse(localStorage.getItem('quoteSettings')) || {};
            if (settings.fontSize) {
                quoteText.style.fontSize = `${settings.fontSize}px`;
                fontSizeSlider.value = settings.fontSize;
            }
            if (settings.quoteType) {
                quoteTypeSelect.value = settings.quoteType;
            }
        }
        
        // 保存设置到localStorage
        function saveSettings() {
            const settings = {
                fontSize: fontSizeSlider.value,
                quoteType: quoteTypeSelect.value
            };
            localStorage.setItem('quoteSettings', JSON.stringify(settings));
            settingsPanel.classList.remove('show');
        }
        
        // 获取随机名言
        function getRandomQuote() {
            const settings = JSON.parse(localStorage.getItem('quoteSettings')) || {};
            const selectedType = settings.quoteType || 'random';
            
            let filteredQuotes = localQuotes;
            if (selectedType !== 'random') {
                filteredQuotes = localQuotes.filter(quote => quote.type === selectedType);
            }
            
            if (filteredQuotes.length === 0) {
                filteredQuotes = localQuotes; // 回退到所有名言
            }
            
            const randomIndex = Math.floor(Math.random() * filteredQuotes.length);
            return filteredQuotes[randomIndex];
        }
        
        // 显示新名言
        function displayNewQuote() {
            const quote = getRandomQuote();
            quoteText.textContent = `"${quote.text}"`;
            quoteAuthor.textContent = `—— ${quote.author}`;
            
            // 检查是否今天已经显示过名言
            const today = new Date().toDateString();
            const lastDisplayed = localStorage.getItem('lastDisplayed');
            
            if (lastDisplayed !== today) {
                localStorage.setItem('lastDisplayed', today);
                localStorage.setItem('dailyQuote', JSON.stringify(quote));
            }
        }
        
        // 显示每日名言
        function displayDailyQuote() {
            const today = new Date().toDateString();
            const lastDisplayed = localStorage.getItem('lastDisplayed');
            const savedQuote = localStorage.getItem('dailyQuote');
            
            if (lastDisplayed === today && savedQuote) {
                const quote = JSON.parse(savedQuote);
                quoteText.textContent = `"${quote.text}"`;
                quoteAuthor.textContent = `—— ${quote.author}`;
            } else {
                displayNewQuote();
            }
        }
        
        // 事件监听
        newQuoteBtn.addEventListener('click', displayNewQuote);
        settingsBtn.addEventListener('click', () => {
            settingsPanel.classList.toggle('show');
        });
        saveSettingsBtn.addEventListener('click', saveSettings);
        
        // 初始化
        loadSettings();
        displayDailyQuote();
        
        // 自动刷新名言 (每小时)
        setInterval(displayNewQuote, 3600000);
    </script>
</body>
</html>
